/**
 * time: 2025-09-16
 * author: XJ
 * description: 产品基本信息页面
 */

import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Form, Input, message, Row, Select, Space, Steps, TreeSelect, Upload } from 'antd';
import Dragger from 'antd/es/upload/Dragger';
import { Col } from 'antd/lib';
import area from '@/components/staticFile/region_options.json';
import TextArea from 'antd/es/input/TextArea';
import { uploadFile } from '@/services/apis/companyRegister';
import { useState } from 'react';
const FORM_LAYOUT = {
  labelCol: { span: 6 }, // 调整标签宽度，避免长标签换行
  wrapperCol: { span: 18 },
  layout: 'horizontal' as const,
  
  size: 'middle' as const, // 统一表单控件尺寸
};
const ProductBaseInfoPage: React.FC<{ form: any }> = (props) => {
  const { stepProps, setStepProps } = useModel('PublishProduct.stepProps');
  const [showList,setShowList] = useState<any[]>([]);
  const [otherList, setOtherList] = useState<any[]>([]);

  const nextStep = () => {

    props.form.validateFields(["productName", "purchaseWay", "deploymentArchitecture",
      "priceHigh", "priceLow", "productShow", "otherInfo"]).then(() => {
        debugger
        setStepProps((prev) => ({ ...prev, current: prev.current + 1 }))
      })

  }
  const handleAutoUpload = async (file: any, formPath: any) => {

    try {
      const response = await uploadFile(file)
      if (response.code == "0") {
        //message.success("上传成功")
        props.form.setFieldValue(formPath, [response.data])
        if(formPath == "productShow"){
          setShowList(prev => ([...prev, {name:response.data.filename, uid:Math.random().toString()}]))
        }else{
          setOtherList(prev => ([...prev, {name:response.data.filename, uid:Math.random().toString()}]))
        }
        // handleSuccess(data, file);

      }
    } catch (error) {
      // handleError(error, file);
    }
  };

  return (
    // <Form
    //   {...FORM_LAYOUT}

    //   form={form}
    //   onFinish={onFinish}

    // >
    //   <div style={{ padding: 20, backgroundColor: '#f8f9fa', boxSizing: 'border-box' }}>
    //     <div
    //       style={{
    //         backgroundColor: '#fff',
    //         padding: 20,
    //         borderRadius: 8,
    //         boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
    //       }}
    //     >
    <>
      <div
        style={{
          fontSize: 16,
          fontWeight: 500,
          color: '#1f2937',
          marginBottom: 12,
        }}
      >
        基本信息
      </div>
      <Form.Item
        label="产品名称"
        name="productName"
        rules={[{ required: true, message: '请输入产品名称' }]}
      >
        <Input placeholder="请输入产品名称" />
      </Form.Item>
      {/* <Form.Item
          label="所属城市"
          name="city"
          rules={[{ required: true, message: '请选择所在城市' }]}
        >
          <TreeSelect
            allowClear
            placeholder="请选择注册城市"
            treeData={area}
            // style={COMMON_FIELD_STYLE}
          />
        </Form.Item> */}
      <Form.Item
        label="购买方式"
        name="purchaseWay"
        rules={[{ required: true, message: '请选择购买方式' }]}
      >
        <Select
          allowClear
          placeholder="请选择购买方式"
          options={[
            { value: 'once', label: '一次性购买' },
            { value: 'need', label: '按需购买' },
            { value: 'subscribe', label: '订阅' },
            { value: 'month', label: '包月计费' },
            { value: 'year', label: '包年计费' },
            { value: 'needPay', label: '按需计费' },
            { value: 'other', label: '其他' },
          ]}
        />
      </Form.Item>
      <Form.Item
        label="部署架构"
        name="deploymentArchitecture"
        rules={[{ required: true, message: '请选择部署架构' }]}
      >
        <Select
          allowClear
          placeholder="请选择部署架构"
          options={[
            { value: 'CS', label: 'C/S' },
            { value: 'BS', label: 'B/S' },
            { value: 'PC', label: 'PC单机' },
            { value: 'danji', label: '单机部署' },
            { value: 'duoji', label: '多机/集群部署' },
            { value: 'wfy', label: '微服务架构部署' },
            { value: 'rqh', label: '容器化部署' },
            { value: 'hh', label: '混合部署' },
            { value: 'by', label: '边缘计算部署' },
            { value: 'yys', label: '云原生部署' },
            { value: 'qt', label: '其他' },
          ]}
        />
      </Form.Item>
      <Form.Item
        label="报价区间"
        // name="price"
        rules={[{ required: true, message: '请输入报价区间' }]}
      >
        <Space>
          <Form.Item
            noStyle
            name="priceHigh"
            rules={[{ required: true, message: '请输入报价区间最小值' }]}
          >
            <Input placeholder="报价区间最小值" />
          </Form.Item>
          ——
          <Form.Item
            noStyle
            name="priceLow"
            rules={[{ required: true, message: '请输入报价区间最大值' }]}
          >
            <Input placeholder="报价区间最大值" />
          </Form.Item>
        </Space>
      </Form.Item>

      <Form.Item
        label="产品展示主视觉"
        name="productShow"
        rules={[{ required: true, message: '请上传产品展示主视觉' }]}
      >
        <Upload
          accept='.jpg,.jpeg,.bmp,.png'
          fileList={showList}
          beforeUpload={(file) => {
            // 选择文件后立即触发自动上传
            handleAutoUpload(file, "productShow");
            return false; // 阻止组件默认自动上传行为，使用自定义逻辑
          }}
          listType="text"
          maxCount={1}
        >
          <Button icon={<UploadOutlined />}>点击上传(图片尺寸为300*180，不得超过1M； 支持JPG, JPEG, BMP, PNG格式;)</Button>
        </Upload>
        {/* <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击或拖拽上传</p>
          </Dragger> */}
      </Form.Item>
      <Form.Item
        label="其他资料"
        name="otherInfo"
        rules={[{ required: true, message: '请上传其他资料' }]}
      >
        <Upload
          //  accept='.jpg,.jpeg,.bmp,.png'
          fileList={otherList}
          beforeUpload={(file) => {
            // 选择文件后立即触发自动上传
            handleAutoUpload(file, "otherInfo");
            return false; // 阻止组件默认自动上传行为，使用自定义逻辑
          }}
          listType="text"
          maxCount={1}
        >
          <Button icon={<UploadOutlined />}>上传附件，不大于5M</Button>
        </Upload>
      </Form.Item>

      <Form.Item label={null} style={{ marginTop: 40, textAlign: 'center' }}>
        <Button onClick={nextStep} type="primary">
          下一步
        </Button>
      </Form.Item>
    </>
    //     </div>
    //   </div>
    // </Form>
  );
};

export default ProductBaseInfoPage;
